<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>CSS 权重的探讨</title>
<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>
<link href="css/prettify.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/prettify.js" type="text/javascript"></script>
<style>
/*base*/
html, body {
	font-size: 100%;
	font-family: 'Noticia Text', serif;
	overflow:-Scroll;overflow-x:hidden;
}
* {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 1em;
}
*, *:after, *:before {
	-moz-box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Kavoon', cursive;
}
h1 {
	font-size: 2em;
	color: #666;
	margin-bottom: 0.65em;
}
aside {
	color: #999;
}
#set_1, #set_2, #set_3, #set_4 {
	position: relative;
	padding: 5em 0;
}
#set_1 {
	padding: 16.8em 0 60px;
}
#set_1 {
	background: none repeat scroll 0 0 #41AB6B;
}
#set_2 {
	background: none repeat scroll 0 0 #EEA303;
}
#set_3 {
	background: none repeat scroll 0 0 #F06060;
}
#set_4 {
	background: none repeat scroll 0 0 #0E83CD;
}
/*container 全局容器*/
.container {
	height: auto;
	margin: 20px auto;
}
.container > #header {
	background: none repeat scroll 0 0 #FFFFFF;
	left: 0;
	margin: 0 auto;
	padding: 2em 1em;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 999999;
}
#scrollNum {
	font-size: 0.9em;
	padding-top: 1em;
}
#scrollNum a {
	border: 3px solid #DDDDDD;
	display: inline-block;
	font-weight: 700;
	margin: 0.5em;
	padding: 0.6em 1em;
}
a {
	color: #CCCCCC;
	text-decoration: none;
}
#scrollNum a.showNum, #scrollNum a.showNum:hover {
	border: 3px solid #AAAAAA;
	color: #AAAAAA;
	opacity: 1;
}
/*section 内的样式设计*/
.title {
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: tb-rl;
	font-size: 2em;
	padding: 0.5em;
	position: relative;
	float: left;
	left: 3em;
	width:70px;
	letter-spacing: 0.2em;
}
.content {
	font-size: 1.5em;
	line-height: 1.6em;
	color: #fff;
	width: 61%;
	margin: 0 auto;
}
.content >ol >li {
	font-weight: bold;
}
.ollist {
	font-size: 0.9em;
	text-indent: 1em;
	list-style: inside;
	color: #EFEFEF;
	font-weight: 500;
}
sup {
	color: #930;
}
small {
	color: #000;
}
#footer article {
	background: none repeat scroll 0 0 #FFFFFF;
	margin: 0 auto;
	padding: 1em 1em;
	text-align: center;
	width: 100%;
}
#footer aside {
	line-height: 1em;
	padding: .5em;
	font-family: 'Gudea', sans-serif;
}
</style>
<script>
$(document).ready(function (){
         $("#scrollNum a").each(function(index){
                $(this).click(function(){    
                $("a").removeClass("showNum");
                $("a").eq(index).addClass("showNum");
				var offsetTop = $($(this).attr("href")).offset().top - 165;
				console.log($($(this).attr("href")).offset().top);
				$("html, body").animate({
					scrollTop: offsetTop + "px"
				}, {
					duration: 500,
					easing: "swing"
				}); //animate end
                });
                });
        });
</script>
</head>

<body>
<div class="container">
  <header id="header">
    <article>
      <h1>CSS&nbsp;权重的探讨</h1>
      <aside>CSS&nbsp;全称为：Cascading Style Sheets (层叠样式表单),所以我们可以知道，用CSS去美化页面也就是像画画一样，用一层层笔墨去修饰和美化。</aside>
      <nav id="scrollNum"> <a href="#set_1" class="showNum">1</a> <a href="#set_2" >2</a> <a href="#set_3">3</a> </nav>
    </article>
  </header>
  <section id="set_1" >
    <div class="title">什么是CSS权重</div>
    <article class="content">
      <p>&nbsp;&nbsp;&nbsp;&nbsp;CSS权重，或许听起来让新手们一下子摸不着头脑了，因为可能听过WEB中的SEO优化中有权重这个概念，却实实在在没听过CSS权重。</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;而其实CSS权重就是一个和SEO中的权重一样的东西，就是为了更好的通用优先级的方式选择样式。</p>
      <ol>
        <li>权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。</li>
        <li>当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。</li>
        <li>每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。</li>
        <li>如果两个选择器同时作用到一个元素上，权重高者生效。</li>
      </ol>
    </article>
  </section>
  <section id="set_2">
    <div class="title">权重的等级</div>
    <article class="content">
      <p>&nbsp;&nbsp;&nbsp;&nbsp;说到权重的等级，我们必须要提前讨论两个问题：</p>
      <ol>
        <li>在CSS中选择器是被划分为几类的。<abbr title="伪类指的是一种行为状态的；伪元素指的是一种表现形式，但是DOM中并不能找到它"><sup>*</sup></abbr></li>
        <p>&nbsp;&nbsp;ID选择器 <br />
          <code class="prettyprint">&nbsp;&nbsp;Id也是元素的一种标识，比如#div </code> </p>
        <p>&nbsp;&nbsp;类，属性选择器和伪类选择器<br />
          <code class="prettyprint">&nbsp;&nbsp;这一类包括各种class，属性选择器，伪类选择器比如 :hover,:focus等等</code> </p>
        <p>&nbsp;&nbsp;元素和伪元素 <br />
          <code class="prettyprint">&nbsp;&nbsp;元素跟伪元素选择器，比如:before 与 :after.</code> </p>
        <p>&nbsp;&nbsp;<strong>特殊：</strong>行内样式<br />
          <code class="prettyprint">&nbsp;&nbsp;行内样式包含在你的html中 对你的元素产生直接作用，比如:</code>
        <pre  class="prettyprint">&nbsp;&nbsp;&lt;h1 style="color: #CCC;"&gt;header&lt;/h1&gt;</pre>
        </p>
        <li>分类在权重中的关系和权重值。</li>
        <p>&nbsp;&nbsp;权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.
        <pre class="prettyprint">01. *{}                         ====》0 //全局配置项权重为 0<br/>02. p{}                         ====》1 //一个元素选择器权重为 1<br/>03. :before{}                   ====》1 //一个伪元素权重为 1<br/>04. .content {}                 ====》10 //一个类选择器权重为 10<br/>05. *[rel=up] {}                ====》10 //一个属性选择器权重为 10<br/>06. :hover{}                    ====》10 //一个伪类选择器权重为 10<br/>07. #content {}                 ====》100 //一个ID选择器权重为 100<br/>09. style=""                    ====》1000 //一个行内样式权重为 1000</pre>
        </p>
      </ol>
    </article>
  </section>
  <section id="set_3">
    <div class="title">权重的基本规则</div>
    <article class="content">
      <p>&nbsp;&nbsp;&nbsp;&nbsp;在上面只是简单的定义和划分了一下权重的值，但是在使用的时候这些还远远不够的，因为我们还必须遵循着他的一些规则来使用。</p>
      <ol>
        <li>相同的权重：以后面出现的选择器为最后规则</li>
        <li>不同的权重，权重值高则生效
          <ol class="ollist">
            <li>包含更高权重选择器的一条规则拥有更高的权重。
              <p><small>HTML</small></p>
              <pre class="prettyprint">&lt;div id=&quot;box&quot; class=&quot;box&quot;&gt;<br>        &lt;div id=&quot;main&quot; class=&quot;mm&quot;&gt;&lt;/div&gt;<br>  &lt;/div&gt;</pre>
              <p><small>CSS</small></p>
              <pre class="prettyprint">01. #box .mm {width: 200px;height: 200px;background:red;}<br/>  02. #main {width: 100px;height: 100px;background:yellow}<br/>  03. .box .mm {width: 50px;height: 50px;background:blue;}</pre>
              <p><small>效果图</small></p>
              <img src="images/01.png" alt="01"/> <img src="images/02.png" alt="02"/> <img src="images/03.png" alt="03"/> </li>
            <li>带有上下文关系的选择器比单纯的元素选择器权重要高。这条规则同样也适用于含有多个元素的选择器。<abbr title="这对于我来说是一个不太理解的问题"><sup>*</sup></abbr></li>
            <li>与元素“挨得近”的规则生效
              <p><small>外部CSS样式</small></p>
              <pre class="prettyprint">#content h1 {    padding: 5px;  }</pre>
              <p><small>内部CSS样式</small></p>
              <pre class="prettyprint">&lt;style type="text/css"&gt;    #content h1 {      padding: 10px;    }  &lt;/style&gt;</pre>
            </li>
            <li>最后定义的这条规则会覆盖上面与之冲突的规则
              <pre class="prettyprint">p { color: red; background: yellow }  <br/>   p { color: green }</pre>
            </li>
            <li>无论多少个元素组成的选择器，都没有一个class选择器权重高。</li>
          </ol>
        </li>
      </ol>
    </article>
  </section>
  <footer id="footer">
    <article>
      <aside>Justsy | 嘉兴加赛信息技术有限公司</aside>
      <aside>相关资料来自<a href="http://www.w3cplus.com/css/css-specificity-things-you-should-know.html">你应该知道的一些事情——CSS权重</a> <a href="http://www.w3cplus.com">www.w3cplus.com</a></aside>
      <aside>作者：shimengwen</aside>
    </article>
  </footer>
</div>
<script>
prettyPrint();
</script>
</body>
</html>
